<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
        margin: 0;
        padding:0;
         }
    .nav{
           width: 100px;
         height: 30px;
          background-color: aqua; 
         }
        li{
         float: left;
         width: 220px;
     height: 30px;
     list-style: none;
    }
     a{
     text-decoration: none;
         }
        </style>
</head>
<body>
    <div>
        <ul class="nav">
            <li>
                <a href="#">家用电器</a>
                <ul>
                    <li>
                        <a href="#">电视</a>
                    </li>
                    <li>
                        <a href="#">空调</a>
                    </li>
                    <li>
                        <a href="#">冰箱</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
         //获取元素
         let nav =document.querySelector('.nav');
         let lia =nav.children;
         //注册鼠标指针经过实件和鼠标指针离开事件
         for(let i=0;i<lia.length;i++){
     lia[i].onmouseover=function(){
     this.children[1].style.display='block';
     };
     lia[i].onmouseout=function(){
     this.children[1].style.display='none';
     };
     }
        </script>
</body>
</html>